<template>
  <div v-show="isShowBg" class="image-list">
    <div v-for="(arch, index) in indexs" :key="index" class="image-container">
      <img :src="arch.image" alt="背景图片" class="background-image" />
      <div class="content">
        <h2 class="title">{{ arch.title }}</h2>
        <p class="description">{{ arch.description }}</p>
        <button class="action-button" @click="gotoDetail(arch.id)">查看详情</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ArchivesForm } from "@/api/system/archives";
import BlogAPI from "@/api/blog/blog";
import { useRouter } from "vue-router";

const router = useRouter();
const isShowBg = ref(true);
const indexs = ref<ArchivesForm[]>();
// 加载博客文章列表
function loadTop() {
  BlogAPI.getTop3().then((data) => {
    indexs.value = data;
  });
}

const updateHeight = () => {
  const vh = window.innerHeight;
  document.documentElement.style.setProperty("--viewport-height", `${vh}px`);
};

function gotoDetail(id: Number) {
  router.push("/blog/detail?aid=" + id); // 跳转到 /detail 页面
}

onMounted(() => {
  updateHeight();
  window.addEventListener("resize", updateHeight);
  loadTop();
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateHeight);
});

watch(
  () => router.currentRoute.value.path,
  (toPath) => {
    if (toPath != "/blog") isShowBg.value = false;
    else isShowBg.value = true;
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
:root {
  --viewport-height: 100vh;
}

/* 新增全局滚动设置 */
html {
  /* scroll-snap-type: y mandatory; */
  /* overflow-y: scroll; */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.image-list {
  /* 移除固定定位 */
  width: 100%;
}

.image-container {
  position: relative;
  width: 100%;
  height: 100vh; /* 直接使用视口高度 */
  scroll-snap-align: start; /* 滚动对齐 */
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.content {
  position: relative; /* 改为相对定位 */
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 5rem;
  color: white;
  max-width: 600px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.description {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.action-button {
  color: white;
  background: none;
  border: none;
  width: 20%;
  padding: 0;
  font-size: 1.1rem;
  cursor: pointer;
  transition: opacity 0.3s;
  text-decoration: underline;
}

.action-button:hover {
  opacity: 0.8;
}

body {
  margin: 0;
  overflow-x: hidden;
}
</style>
